<template>
  <div class="container">
    <homeCard :has-more="false">
      <span slot="title">
        <i class="iconfont icon-woderenwu home-card-title-i"></i>
        <span class="home-card-title">消息中心</span>
      </span>
      <div class="card1">
        <img src="../../../assets/card1.png" alt="">
        <div class="label">
          <span class="name">{{ userInfo.name }} <span class="logout" @click="goOut">注销</span></span>
          <span class="time">上次登录时间：{{ userInfo.lastLogin }}</span>
        </div>
      </div>
      <div class="bot">
        <div class="card card2 img1" @click="$router.push({ name: 'messageTodo' })">
          <div class="top">
            <div class="svgBox flex-center">
              <img
                src="" />
            </div>
            <span class="msgWord">待办消息</span>
          </div>

          <span class="bottom1">{{ unDoneNum }}</span>
        </div>
        <div class="card card2 img2" @click="$router.push({ name: 'messageDone' })">
          <div class="top">
            <div class="svgBox flex-center">
              <img src="" /> 
            </div>
            <span class="msgWord">已办消息</span>
          </div>
          <span class="bottom">{{ doneNum }}</span>
        </div>
      </div>
    </homeCard>
  </div>
</template>

<script>
import homeCard from "@/views/Home/module/homeCard";
import autherConfig from "../../../../config/autherConfig";
export default {
  name: "msgCenter",
  computed: {
    unDoneNum() {
      return this.$store.getters.unDoneNum
    },
    doneNum() {
      return this.$store.getters.doneNum
    },
  },
  components: {
    homeCard
  },
  data() {
    return {
      userInfo: {},
    }
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
  },
  methods: {
    goOut() {
      $confirm('是否注销').then(res => {
        sessionStorage.setItem('token', '')
        let href = autherConfig.ip + 'esc-sso/logout?service=' + encodeURIComponent(`${window.location.origin}/#/home`)
        // let localHref = encodeURIComponent(`${window.location.origin}/#/singleLogin`)
        // let href = `http://iam.jxsgkjt.com/esc-sso/oauth2.0/authorize?client_id=038999a4bbf8894b4588&response_type=code&redirect_uri=${localHref}`
        window.open(href, '_self')
      }).catch(err => {
        console.log(666)
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  width: 44.5rem;
  height: 43.7rem;
  // height: 48.7rem;

  .card {
    display: flex;
    flex-direction: column;

    .top {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .msgWord {
        font-size: 1.9rem;
        font-weight: 500;
        display: inline-block;
        margin-top: 2rem;
        margin-bottom: -1.3rem;
        color: black;
      }

      .svgBox {
        width: 8.4rem;
        height: 8.4rem;
        background-color: white;
        border-radius: 100%;

        .iconsvg {
          width: 6.3rem;
          height: 6.3rem;
        }
      }

    }

    .bottom1 {
      height: 6.3rem;
      width: 100%;
      text-align: center;
      line-height: 6.3rem;
      font-size: 4rem;
      color: rgb(248, 167, 4);
    }
    .bottom {
      height: 6.3rem;
      width: 100%;
      text-align: center;
      line-height: 6.3rem;
      font-size: 4rem;
      color: black;
    }
  }

  .card1 {
    width: 42.2rem;
    // height: 14.3rem;
    height: 9.3rem;
    // background: linear-gradient(0deg, #DAE7FF, #90B1FF);
    border-radius: 16px;
    margin-bottom: 0rem;
    // margin-bottom: 1.3rem;
    display: flex;
    align-items: center;

    img {
      width: 8.4rem;
      height: 8.4rem;
      border-radius: 50%;
      margin: 0 1.5rem;
    }

    .label {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 2.4rem;
        font-weight: 500;
        color: #1E2B7B;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logout {
          display: inline-block;
          color: white;
          font-size: 1.6rem;
          cursor: pointer;
          width: 5.3rem;
          text-align: center;
          height: 2.7rem;
          background: linear-gradient(0deg, #FA9100, #FF4200);
          border-radius: .5rem;
        }
      }

      .time {
        font-size: 1.6rem;
        font-weight: 500;
        color: #7E85B2;
      }
    }
  }

  .bot {
    display: flex;
    justify-content: space-between;

    .card2 {
      width: 19.7rem;
      height: 25.3rem;
      border-radius: 16px;
      cursor: pointer;
    }

    .img1 {
      // background-image: url("../../../assets/card1.png");
      background-size: 100% 100%;
    }

    .img2 {
      // background-image: url("../../../assets/card2.png");
      background-size: 100% 100%;
    }
  }
}</style>